import React,{Component} from 'react';
import {ListItem,ListInfo,LoadMore} from '../style';
import {connect} from 'react-redux';
import {actionCreators} from '../store';

class List extends Component{
  render(){
    const {list} = this.props;
    return (
      <div>
        {
          list.map((item)=>{
            return (
              <ListItem key={item.get('id')}>
                <img classNmae="pic" src={item.get('imgUrl')} alt=''/>
                <ListInfo>
                  <h3 className="title">{item.get('title')}</h3>
                  <p classNmae="doc">{item.get('doc')}</p>
                </ListInfo>
              </ListItem>
            )
          })
        }
        <LoadMore /*onClick={this.props.getMoreList()}*/ >更多文字</LoadMore>
      </div>
    )
  }
}
const mapState =(state)=>({
  list:state.get('home').get('articleList'),
  page:state.getIn(['home','articlePage'])
})

const mapDispatch = (dispatch) =>({
  getMoreList(){
    dispatch(actionCreators.getMoreList())
  }
})

export default connect(mapState,mapDispatch)(List)
